<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/jquery.min.js"></script>
    <script src="/js/vue3.2.37.global.js"></script>
    <script src="/js/axios.min.js"></script>
    <script src="/js/layer.js"></script>
</head>
<body style="text-align: center">

<div id="app">

    <h3>当前网址：http://127.0.0.1:8080</h3>
    <a href="/user-oauth/logout">
        <button id="logout">退出登录</button>
    </a>

    <p>
        用户名：<span id="userName">{{userName}}</span>
    </p>

    <p>
        用户描述：<span id="userNameDesc">{{userNameDesc}}</span>
    </p>

    <div style="border: 1px solid gray;margin-top: 50px;">
        <h2 style="color: red">token信息（这部分信息正常来说不会给用户展示）</h2>

        <div style="margin-top: 50px;">
            <p >
                <span style="font-weight: bolder">授权方式（response_type）：</span>{{response_type}}
            </p>
            <p >
                <span style="font-weight: bolder">访问令牌（access_token）：</span>{{access_token}}
            </p>
            <p>
                <span style="font-weight: bolder">令牌类型（token_type）：</span>{{token_type}}
            </p>
            <p>
                <span style="font-weight: bolder">访问令牌可持有时间长度（秒）（expires_in）：</span>{{expires_in}}
            </p>
            <p>
                <span style="font-weight: bolder">刷新令牌（refresh_token）：</span>{{refresh_token}}
            </p>
            <p>
                <span style="font-weight: bolder">刷新令牌可持有时间长度（expires_in_refresh）：</span>{{expires_in_refresh}}
            </p>
        </div>

    </div>

</div>


</body>

<script>
    function getCookie(cookie_name) {
        var allcookies = document.cookie;
        //索引长度，开始索引的位置
        var cookie_pos = allcookies.indexOf(cookie_name);


        // 如果找到了索引，就代表cookie存在,否则不存在
        if (cookie_pos != -1) {
            // 把cookie_pos放在值的开始，只要给值加1即可
            //计算取cookie值得开始索引，加的1为“=”
            cookie_pos = cookie_pos + cookie_name.length + 1;
            //计算取cookie值得结束索引
            var cookie_end = allcookies.indexOf(";", cookie_pos);


            if (cookie_end == -1) {
                cookie_end = allcookies.length;


            }
            //得到想要的cookie的值
            var value = unescape(allcookies.substring(cookie_pos, cookie_end));
        }
        return value;
    }
</script>


<script>


    const {createApp} = Vue
    const request = axios.create({})
    createApp({
        data() {
            return {

                userName: getCookie("userName"),
                userNameDesc: getCookie("userNameDesc"),
                response_type:getCookie("response_type"),
                access_token: getCookie("access_token"),
                token_type: getCookie("token_type"),
                expires_in: getCookie("expires_in"),
                refresh_token: getCookie("refresh_token"),
                expires_in_refresh: getCookie("expires_in_refresh"),

            }
        },
        methods: {},
        mounted: async function () {
            let {data: responseData} = await request.get('/user-oauth/oauth-url')
            if (responseData && responseData.firstOauthUrl) {
                this.firstOauthUrl = responseData.firstOauthUrl;
            }

            if (this.error && this.error.length > 0) {
                layer.alert(this.error)
            }

        }
    }).mount('#app')

</script>

</html>